<template>
    <div>
        <slider  :announcement="announcement" :slides="slides"></slider>
        <booklist :books="lastupdatebooks"
        heading="最新更新"
                  @haha="preview($event)">

        </booklist>
        <booklist :books="books1"
                  heading="最新编辑"
                 @haha="preview($event)">

        </booklist>
        <modal-dialog ref="dialog">
            <div slot="heading">abcsd</div>
            <div>
                <div v-if="selected">
                    <h2>{{ selected.title }}</h2>
                </div>
            </div>
        </modal-dialog>
    </div>
</template>
<script type="text/ecmascript-6">
    import slider from "./slider.vue"
    import booklist from "./list.vue"
    import ModalDialog from "./dialog.vue"
    export default{
    components: {slider, booklist,ModalDialog}
    ,beforeMount(){
        console.log("beforeMount");
    }
    ,mounted(){
        console.log("beforeMount")
    }
    ,created(){
        this.$http.get('/data.json').then(res=> {
            this.announcement = res.body.announcement
            this.slide = res.body.slides
            this.lastupdatebooks = res.body.lastupdatebooks
            this.books1 = res.body.recommended
        })
    }
       ,data(){
            return{
                selected:null,
                lastupdatebooks:[],
                announcement:'',
                slides:[],
                books1:[],

            }
        },
        methods: {
            preview (book) {
                this.selected = book
                this.$refs.dialog.open()
            }
        }
    }
</script>